<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { guild_roomApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  import { getData, weekStarts} from '@/utils'
  import xmImage from '@/components/xmImage/index.vue'
  import Pagination from "@/components/Pagination/index.vue";
  import serachUserid from '@/components/serachUserid/index.vue'
  import table2excel from 'js-table2excel';
  const dataForm = ref()
  const action = reactive({
    total:0,
    kk_total:0,
    list:[] as any[],
    dateTime:weekStarts(),
    dialogFormVisible:false,
    disabled:false,
  })
  interface formQuert {
    audit_msg: string
  }
  const form = reactive({} as formQuert)
  const formRules = {
    audit_msg: [{ required: true, trigger: "blur", message: "请填写审核备注" }],
  }
  const listQuery = reactive<any>({
    page:1,
    limit:20,
    user_id:'',
    union_id: '',
    status:'',
    date_st:0,
    date_ed:0,
  })
  const listStatus = [
    'docx生成中','发票上传中','审核中','审核通过','审核打回','打款成功'
  ]
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const resetQuery = ()=>{
    Object.assign(listQuery,{
      page:1,
      limit:20,
      user_id:'',
      union_id: '',
      status:'',
      date_st:0,
      date_ed:0,
    })
    getList()
  }
  const handleDownload = async()=>{
    const loading = Toastloading('数据导出中...')
    filtersTime()
    const query = { ...listQuery }
    query.page = 1
    query.limit = action.total || 20
    const res = await guild_roomApi.getUnionSettleList(query)
    const { data=[]} = res.data
    loading.close()
    if(data.length == 0) {
      ToastWarning('暂无可导出数据')
      return
    }
    const tHeader = [
      { title: '序号', key: "id"},
      { title: '公会id', key: "union_id"},
      { title: '公会名称', key: "union_name"},
      { title: '结算周期', key: "cycle"},
      { title: '结算金额(角)', key: "settle_kk"},
      { title: '结算公司', key: "union_company"},
      { title: '结算银行', key: "union_bank_name"},
      { title: '结算银行账号', key: "union_bank_no"},
      { title: 'docx文档', key: "settle_docx"},
      { title: '确认图片', key: "confirm_img", type: "image"},
      { title: '发票图片', key: "invoice_img", type: "image"},
      { title: '审核备注', key: "audit_msg"},
      { title: '结算状态', key: "status_text"}
    ]
    const list = data.map((obj:any)=>{
      const { settle_date_st=0, settle_date_ed=0, status=-1 } = obj
      obj['cycle'] = `${getData(settle_date_st)} - ${getData(settle_date_ed)}`
      obj['status_text'] = listStatus[status]
      return obj
    })
    table2excel(tHeader, list, `${getData({getTime:listQuery.date_st * 1000})} - ${getData({getTime:listQuery.date_ed * 1000})}公会结算`)
  }
  const OpenForm = (type:any,row:any)=>{
    const { id=0 } = row
    if(!id) return ToastWarning('id error')
    action.dialogFormVisible = true
    Object.assign(form,{
      id,
      status:type,
      audit_msg:''
    })
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loadng = Toastloading()
      guild_roomApi.unionSettleAudit(form).then(()=>{
        action.dialogFormVisible = false
        ToastSuccess('操作成功')
        getList()
        loadng.close()
      }).catch(()=>{
        loadng.close()
      })
    })
  }
  const filtersTime = ()=>{
    if(action.dateTime) {
      const date = new Date(action.dateTime)
      let end=new Date(date.getTime()+(3600*1000*24* (date.getDay()==0 ? 0:7- date.getDay()))).getTime()
      listQuery.date_st = Math.round(new Date(action.dateTime).getTime() / 1000)
      listQuery.date_ed = Math.round(end / 1000)
    }else {
      delete listQuery.date_st
      delete listQuery.date_ed
    }
    
  }
  const getList = async()=> {
    const loading = Toastloading()
    filtersTime()
    const res = await guild_roomApi.getUnionSettleList(listQuery)
    loading.close()
    const { data=[], total=0, kk_total=0 } = res.data
    action.kk_total = kk_total
    action.total = total
    action.list = data
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">公会ID：</div>
          <el-input
            v-model="listQuery.union_id"
            placeholder="请输入公会ID"
          />
        </div>
        <div class="labelItem">
          <div class="label">会长ID：</div>
          <serachUserid v-model:user_id="listQuery.user_id" />
        </div>
        <div class="labelItem">
          <div class="label">结算状态：</div>
          <el-select clearable v-model="listQuery.status">
            <el-option v-for="(item,index) in listStatus" :key="index" :label="item" :value="index" />
          </el-select>
        </div>
        <div class="labelItem">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="action.dateTime"
            type="week"
            format="YYYY 第 ww 周"
            placeholder="选择周"
            @change="handleSerach"/>
        </div>
      </div>
      <div class="labelBox">
        <el-button type="primary" @click="handleSerach">查询</el-button>
        <el-button type="primary" @click="resetQuery">重置</el-button>
        <el-button type="warning" @click="handleDownload">导出</el-button>
      </div>
    </div>
    <div class="labelBox TablelabelBox">
      <div class="labelItem">
        <div class="label">结算总金额：</div>{{ action.kk_total }}
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column width="140" prop="id" label="序号" />
      <el-table-column width="140" prop="union_id" label="公会id" />
      <el-table-column width="180" show-overflow-tooltip prop="union_name" label="公会名称" />
      <el-table-column min-width="300" label="结算周期">
        <template #default="scope">
          {{ getData({getTime:scope.row.settle_date_st * 1000}) }} - {{ getData({getTime:scope.row.settle_date_ed * 1000}) }}
        </template>
      </el-table-column>
      <el-table-column width="180" prop="settle_kk" label="结算金额(角)" />
      <el-table-column width="200" prop="union_company" label="结算公司" />
      <el-table-column width="200" prop="union_bank_name" label="结算银行" />
      <el-table-column width="200" prop="union_bank_no" label="结算银行账号" />
      <el-table-column width="100" show-overflow-tooltip prop="settle_docx" label="docx文档">
        <template #default="scope">
          <a :href="scope.row.settle_docx">下载</a>
        </template>
      </el-table-column>
      <el-table-column width="130" prop="confirm_img" label="确认图片" >
        <template #default="scope">
          <xmImage
          :src="scope.row.confirm_img"
          :list="[scope.row.confirm_img]"/>
        </template>
      </el-table-column>
      <el-table-column width="130" prop="invoice_img" label="发票图片" >
        <template #default="scope">
          <xmImage
          :src="scope.row.invoice_img"
          :list="[scope.row.invoice_img]"/>
        </template>
      </el-table-column>
      <el-table-column min-width="120" show-overflow-tooltip prop="audit_msg" label="审核备注" />
      <el-table-column min-width="100" label="结算状态">
        <template #default="scope">
          {{ listStatus[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="260" label="操作">
        <template #default="scope">
          <template v-if="scope.row.status == 2">
            <el-button type="primary" @click="OpenForm(3,scope.row)">审核通过</el-button>
            <el-button type="danger" @click="OpenForm(4,scope.row)" >审核拒绝</el-button>
          </template>
          <el-button v-if="scope.row.status == 3" type="primary" @click="OpenForm(5,scope.row)" >确认打款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <el-dialog
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      title="审核备注"
    >
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item prop="audit_msg">
          <el-input
            v-model="form.audit_msg"
            placeholder="请填写审核备注"
            :autosize="{minRows: 10}"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="action.dialogFormVisible">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang='scss' scoped>

</style>